<template>
	<view class="login-page" :class="{'orange' : pageTheme == 'orange'}">
		<!-- <view :style="{marginTop: $common.getNavBarHeight()+'px'}"></view> -->
		<view v-if="isWeixin" class="hader" :style="{paddingTop:statusBarHeight+'px'}">
			<view>
				<view></view>
				<view>融悦车主融</view>
				<view></view>
			</view>
		</view>
		<image v-if="pageTheme == 'blue'"
			src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/3/77171709705000286.png"
			class="top-bg">
		</image>
		<image v-if="pageTheme == 'orange'"
			src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/crm-h5-orange.jpg"
			class="top-bg orange"></image>

		<view class="main-content" :style="{'top': pageTheme == 'blue' ? '-44rpx' : '-22rpx'}">
			<view class="news-box" v-if="pageTheme == 'blue'">
				<image src="../static/login/news.png" class="news-pic"></image>
				<view class="right-box">
					<view class="main">以下情况不支持办理，敬请谅解！</view>
					<view class="sub">黑户、按揭车未结清、面包车货车、车龄大于8年、营运车辆、非本人车等。</view>
				</view>
			</view>

			<view class="form-control">
				<view class="f-item">
					<view class="f-label">真实姓名</view>
					<input type="text" class="f-set" v-model="formItem.name" clearable height="92"
						placeholder="请输入您的真实姓名"></input>
					<!-- <u-input class="f-set" v-model="formItem.name" type="text" clearable  height="92" placeholder="请输入您的真实姓名" ></u-input> -->
				</view>

				<view class="f-item">
					<view class="f-label">手机号码</view>
					<input type="number" class="f-set" v-model="formItem.phone" maxlength="11" clearable height="92"
						placeholder="请输入您的联系电话"></input>

				</view>

				<view class="f-item">
					<view class="f-label">验证码</view>
					<input type="text" class="f-set" v-model="formItem.vcode" maxlength="4" clearable height="92"
						placeholder="请输入手机验证码"></input>

					<!-- <u-input class="f-set" v-model="formItem.vcode" :clearable="false" type="number" maxlength="4"  height="92" placeholder="请输入手机验证码" /> -->
					<view class="get-code" :class="codeText=='获取验证码' || codeText=='重新获取'?'color-297EFF':'color-999'"
						@click="getPhoneCode">{{codeText}}</view>
				</view>

				<view class="f-item" @click="openArea">
					<view class="f-label">所在地区</view>
					<view type="text" placeholder='请输入地区' class="f-set"
						:class="{'uniActive': formItem.provincialCityDistrict == ''}">
						{{ formItem.provincialCityDistrict  || '请选择您所在的省/市/区'}}
					</view>
					<image src="/static/login/arrow.png" class="get-code arrow"></image>
				</view>
				<view class="f-item">
					<view class="f-label">车辆状态</view>
					<!-- carStatus -->
					<view class="radio_box" v-if="pageTheme == 'blue'">
						<view :class="formItem.carStatus == item.value ? 'radio_item' : 'radio_item2'" v-for="(item,index) in [
							{value:1,label:'已抵押'},
							{value:2,label:'未抵押'}
							]" :key="index" @click="setRadio(item.value)">
							{{item.label}}
						</view>
					</view>
					<view v-else class="radio_box">
						<view :class="formItem.carStatus == item.value ? 'radio_item_orange' : 'radio_item2_orange'"
							v-for="(item,index) in [
							{value:1,label:'已抵押'},
							{value:2,label:'未抵押'}
							]" :key="index" @click="setRadio(item.value)">
							{{item.label}}
						</view>
					</view>
					<!-- <input type="text" class="f-set" v-model="formItem.carDiy" maxlength="6" clearable height="92"
						placeholder="请输入您的车辆品牌"></input>
 -->
					<!-- <u-input class="f-set" v-model="formItem.carDiy" type="text" clearable  height="92" placeholder="请输入您的车辆品牌" /> -->
				</view>
				<view class="f-item">
					<view class="f-label">车辆品牌</view>
					<input type="text" class="f-set" v-model="formItem.carDiy" maxlength="6" clearable height="92"
						placeholder="请输入您的车辆品牌"></input>

					<!-- <u-input class="f-set" v-model="formItem.carDiy" type="text" clearable  height="92" placeholder="请输入您的车辆品牌" /> -->
				</view>
				<view class="f-item" v-if="uiType === 4">
					<view class="f-label">汽车车牌</view>
					<input type="text" class="f-set" disabled v-model="formItem.carNumber" @tap="plateShow = true"
						maxlength="7" clearable height="92" placeholder="请输入您的汽车车牌" />
					<plateInput v-if="plateShow" :plate="formItem.carNumber" @export="setPlate"
						@close="plateShow = false" />
					<!-- <u-input class="f-set" v-model="formItem.carDiy" type="text" clearable  height="92" placeholder="请输入您的车辆品牌" /> -->
				</view>
				<view class="f-item" v-if="uiType === 6">
					<view class="f-label">汽车车牌</view>
					<input type="text" class="f-set" disabled v-model="carNumber" @tap="plateShow1 = true" maxlength="7" clearable height="92" placeholder="请输入您的汽车车牌" />
					<plateInput v-if="plateShow1" :plate="carNumber" @export="setPlate1"
						@close="plateShow1 = false" />
					<!-- <u-input class="f-set" v-model="" type="text" clearable  height="92" placeholder="请输入您的车辆品牌" /> -->
				</view>

				<view class="agreement">
					<u-checkbox v-model="radioValue" shape="circle"
						:active-color="pageTheme == 'orange' ? '#FF9147' : '#3385FF'">
						<view class="flex-align-center font-s-12 color-999">
							<text>本人已阅读并同意</text>
							<!-- <navigator url="/pages/empower?type=6" class="col">《用户隐私协议》</navigator> -->
							<navigator url="/pages/empower?type=6" class="col">《个人信息授权协议》</navigator>
							<!-- <navigator url="/pages/privacy?type=6" class="col">《用户服务协议》</navigator> -->
						</view>
					</u-checkbox>
				</view>

				<view class="post-btn" @click="doLoginMobile">提交</view>
			</view>
		</view>

		<view class="note-content">
			<template v-if="pageTheme == 'blue'">
				<view class="tab-section">
					<image src="../static/login/tn-1.png" class="tn"></image>
					<view class="list">
						<!-- <view class="item">
							<image src="../static/login/ts1-1.png" class="pic"></image>
							<text class="name">利息低</text>
						</view>
						<view class="item">
							<image src="../static/login/ts1-2.png" class="pic"></image>
							<text class="name">额度高</text>
						</view> -->
						<view class="item">
							<image src="../static/login/ts1-3.png" class="pic"></image>
							<text class="name">期限长</text>
						</view>
						<view class="item">
							<image src="../static/login/ts1-4.png" class="pic"></image>
							<text class="name">手续简单</text>
						</view>
						<view class="item">
							<image src="../static/login/ts1-5.png" class="pic"></image>
							<text class="name">办理灵活</text>
						</view>
					</view>
				</view>

				<view class="tab-section">

					<image src="../static/login/360_login.png" class="tn"></image>
					<view class="list">
						<view class="item">
							<image src="../static/login/ts2-1.png" class="pic"></image>
							<text class="name">客服核对</text>
						</view>
						<image src="../static/login/db-arrow.png" class="step"></image>
						<view class="item">
							<image src="../static/login/ts2-2.png" class="pic"></image>
							<text class="name">现场验车</text>
						</view>
						<image src="../static/login/db-arrow.png" class="step"></image>
						<view class="item">
							<image src="../static/login/ts2-3.png" class="pic"></image>
							<text class="name">办理手续</text>
						</view>
						<image src="../static/login/db-arrow.png" class="step"></image>
						<view class="item">
							<image src="../static/login/ts2-4.png" class="pic"></image>
							<text class="name">办理成功</text>
						</view>
					</view>
				</view>

				<view class="warn-section">
					<image src="../static/login/warn.png" class="warn-pic"></image>
					<!-- <view class="main">根据个人实际能力</view> -->
					<!-- <view class="list">
						<view class="item">合理融租</view>
						<view class="item">避免逾期</view>
					</view> -->

					<view class="copy-right">
						<view class="p">融悦集团</view>
						<!-- <view class="p">客服电话：4008602166</view> -->
						<view class="p">COPYRIGHT &copy; 2023-2024 MYTECH</view>
						<view class="p">浙江云连通融资租赁有限公司版权所有</view>
						<view class="p">浙ICP备2023020784号-1</view>
						<!-- <view class="p">综合年化利率范围：6.5%-24%（单利）</view> -->
						<!-- <view class="p">贷款资金由浙商银行等正规持牌放款机构提供</view> -->
					</view>

					<view class="copy-right">
						<view class="p">温馨提醒：</view>
						<view class="p">·务必本人操作并提供真实有效的信息，相关信息将作为</view>
						<view class="p">您的租赁要素；</view>
						<!-- <view class="p">·租赁有风险，操作需谨慎；请根据个人需求及自身收入</view> -->
						<!-- <view class="p">情况合理租赁，理性消费。</view> -->
					</view>
				</view>
			</template>

			<template v-else-if="pageTheme == 'orange'">
				<view class="orange-info">

					<image class="t-pic"
						src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/crm-h5-orange-foot-1.png"
						mode="widthFix"></image>

					<image class="t-pic" style="margin-top: 112rpx;"
						src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/crm-h5-orange-foot-2.png"
						mode="widthFix"></image>

					<view class="warn-section">
						<image src="../static/login/warn-2.png" class="warn-pic"></image>
						<view class="main">根据个人实际能力</view>
						<view class="list">
							<view class="item">合理融租</view>
							<!-- <view class="item">理性消费</view> -->
							<view class="item">避免逾期</view>
						</view>

						<view class="copy-right">
							<view class="p">融悦集团</view>
							<!-- <view class="p">客服电话：4008602166</view> -->
							<view class="p">COPYRIGHT &copy; 2023-2024 MYTECH</view>
							<view class="p">浙江易顺融资担保有限公司版权所有</view>
							<view class="p">浙ICP备2023020784号-1</view>
							<!-- <view class="p" style="color: #CC6018;">综合年化利率范围：6.5%-24%（单利）</view> -->
							<view class="p" style="color: #CC6018;">贷款资金由浙商银行等正规持牌放款机构提供</view>
						</view>

						<view class="copy-right">
							<view class="p">温馨提醒：</view>
							<view class="p">·务必本人操作并提供真实有效的信息，相关信息将作为您的租赁要素；</view>
							<view class="p">·租赁有风险，操作需谨慎；请根据个人需求及自身收入情况合理租赁，理性消费。</view>
						</view>
					</view>
				</view>

			</template>


		</view>

		<view class="pop-section" v-if="showPop">
			<view class="pop-box">
				<image src="../static/delete.png" class="close" @click="showPop = false"></image>
				<image src="../static/success.png" class="success-pic"></image>
				<view class="title">提交成功</view>
				<view class="sub">客服人员在24小时内致电与您联系</view>
				<view class="getIt" @click="showPop = false">我知道啦</view>
			</view>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒后重新获取"
			unique-key="login"></u-verification-code>

		<u-picker round="10" v-model="showArea" title="选择地址" ref="uPicker" @confirm="getAddress"
			@cancel="showArea=false" closeOnClickOverlay @close="showArea=false" mode="region"
			:params="{province: true,city: true,area: true}"></u-picker>
	</view>
</template>

<script>
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		components: {
			plateInput
		},
		data() {
			return {
				carNumber:'',
				plateShow1:false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 10,
				pageTheme: 'orange', // orange  blue
				scrollTop: 0,
				showPop: false,
				showArea: false,
				radioValue: false,
				plateShow: false,
				plateNo: '',
				formItem: {
					name: '',
					phone: '',
					channelId: '',
					vcode: '',
					provincialCityDistrict: '',
					carDiy: '',
					carStatus: ''
				},
				updateForm: {},
				codeText: '获取验证码',
				isWeixin: false,
				uiType: null,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin') {
				this.isWeixin = true;
			} else {
				this.isWeixin = false;
			};
			this.formItem.channelId = options.id || 100023

			this.getChannel()

			this.$request({
				url: 'ChannelController/tjUV',
				method: 'get',
				data: {
					channelId: this.formItem.channelId
				}
			}).then(res => {

			})
		},
		methods: {
			setRadio(value) {
				this.formItem.carStatus = value;
			},
			getChannel() {
				this.$request({
					url: 'ChannelController/appGetUiType',
					method: 'get',
					data: {
						channelId: this.formItem.channelId
					}
				}).then(res => {
					if (res.code == 200) {
						this.pageTheme = 'blue'
						// console.log(res.data, 'res.data-------》')

						// 如果是抖音小程序直接进入 redLogin 页面
						if (uni.getSystemInfoSync().uniPlatform === 'mp-toutiao') {
							return uni.redirectTo({
								url: `/pages/redLogin?id=${this.formItem.channelId}`
							})
						}
						//<el-option label="融悦车抵" :value="1" />
						//   <el-option label="易顺车抵" :value="3" />
						//   <el-option label="杭停定制" :value="2" />
						//  <el-option label="信也定制" :value="4" /> 
						//  <el-option label="车辆线索" :value="5" /> 
						// switch (res.data) { // 根据请求切换主题
						// 	case 1:
						// 	case 3:
						// 	case 4:
						// 		this.pageTheme = 'blue'
						// 		break;
						// 	case 2:
						// 		this.pageTheme = 'orange'
						// 		break;
						// 	case 5:
						// 		uni.redirectTo({
						// 			url: `/pages/redLogin?id=${this.formItem.channelId}`
						// 		})
						// 		break;
						// 	case 6:
						// 		// uni.redirectTo({
						// 		// 	url: `/pages/360Login?id=${this.formItem.channelId}`
						// 		// })
						// 		break;

						// };
						this.uiType = res.data;
						console.log(this.uiType,'this.uiType============?>')
					}
				})
			},
			openArea() {
				this.showArea = true
				//this.$refs.dialog.show = true
			},
			setPlate(plate) {
				if (plate.length >= 7) this.formItem.carNumber = plate;
				this.plateShow = false;
			},
			setPlate1(plate) {
				if (plate.length >= 7) this.carNumber = plate;
				this.plateShow1 = false;
			},
			getAddress(e) {
				console.log('选择的地址是', e);
				this.formItem.provincialCityDistrict = e.province.label + ',' + e.city.label + ',' + e.area.label
				//this.location = e
			},
			getPhoneCode() {
				if (!this.formItem.phone) {
					uni.showToast({
						title: '请填写账号',
						icon: 'none'
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						mask: true
					})
					this.$request({
						url: '/ClientUserController/sendSMSVcode',
						method: 'get',
						data: this.formItem
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'none'
							})
							this.$refs.uCode.start();
						}
					})
				}
			},
			doLoginMobile() {
				if (!this.radioValue) {
					uni.showToast({
						title: '请阅读并且勾选相关协议',
						icon: 'none'
					})
					return false
				}
				if (!this.formItem.carStatus) {
					uni.showToast({
						title: '请选择车辆状态',
						icon: 'none'
					})
					return false
				}
				if (!this.formItem.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return false
				}

				if (!this.formItem.vcode) {
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					return false
				}
				if (!this.formItem.carDiy) {
					uni.showToast({
						title: '请填写车俩品牌',
						icon: 'none'
					})
					return false
				}
				if (!this.formItem.provincialCityDistrict) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return false
				}
				// console.log(this.formItem, 'this.formItem')
				// return
				this.$request({
					url: '/ClientUserController/verifyVCode',
					method: 'get',
					data: this.formItem
				}).then(res => {
					console.log(res, '-------')
					if (res.code == 200) {
						uni.setStorageSync('userObj', JSON.stringify(this.formItem))
						uni.showToast({
							title:'提交成功'
						})
						if (this.uiType === 4 || this.uiType === 6) {
							uni.navigateTo({
								url: '/pages/successPage'
							})
						} else {
							// let loginObj = res.data
							// uni.setStorageSync('loginObj', JSON.stringify(loginObj))
							// uni.navigateTo({
							// 	url: '/pages/authentication'
							// })
						}

						//this.showPop = true
					}
				})
			},
			codeChange(text) {
				this.codeText = text;
			},

		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 20) {

			} else {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.radio_box {
		display: flex;
		align-items: center;

		.radio_item2,
		.radio_item {
			// width: ;
			width: 90px;
			line-height: 38px;
			background: #297EFF;
			border-radius: 19px;
			font-weight: 400;
			font-size: 14px;
			text-align: center;
			margin-right: 12rpx;
			margin-top: 12rpx;
			color: #fff;
		}

		.radio_item2 {
			background: #F5F7FA;
			color: #999999;
		}

		.radio_item2_orange,
		.radio_item_orange {
			width: 90px;
			line-height: 38px;
			border-radius: 19px;
			font-weight: 400;
			font-size: 14px;
			text-align: center;
			margin-right: 12rpx;
			margin-top: 12rpx;
			color: #fff;
			background-color: #FF9147;
		}

		.radio_item2_orange {
			background: #F5F7FA;
			color: #999999;
		}
	}

	.hader2,
	.hader {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		// align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
		width: 100%;
		height: 176rpx;
		background-color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}

	.hader2 {
		height: 68px;
		align-items: flex-end;
		padding-bottom: 20px;
	}

	.login-page {
		background-color: #fff;

		// 换个主题的颜色
		&.orange {
			.color-297EFF {
				color: #FF9147 !important;
			}

			.agreement .col {
				color: #FF9147 !important;
			}

			.post-btn {
				background-color: #FF9147 !important;
			}

			.note-content {
				background-color: #FF9147 !important;
			}

			.warn-section {
				margin-top: 100rpx !important;

				.warn-pic {
					width: 56rpx !important;
					height: 56rpx !important;
				}

				.main {
					color: #335E8F !important;
				}

				.list .item {
					color: #CC6018 !important;
				}

				.copy-right {
					padding: 0 24rpx;
					color: #335E8F !important;
				}
			}
		}

		.top-bg {
			width: 100%;
			height: 690rpx;

			&.orange {
				height: 642rpx;
			}
		}

		.main-content {
			position: relative;
			top: -66rpx;
			left: 0;
			width: 100%;
			padding: 24rpx;
			// z-index: 2;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}

		.news-box {
			display: flex;
			align-items: center;
			padding: 24rpx;
			background: linear-gradient(180deg, #F5F9FF 0%, #FAFCFF 100%);
			border-radius: 16rpx;
			border: 1rpx solid rgba(41, 126, 255, 0.12);

			.news-pic {
				width: 72rpx;
				height: 72rpx;
			}

			.right-box {
				padding-left: 24rpx;
				margin-left: 24rpx;
				border-left: 2rpx solid #EBEFF5;

				.main {
					font-size: 28rpx;
					font-weight: bold;
					color: #292929;
					line-height: 28rpx;
				}

				.sub {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 32rpx;
				}
			}
		}

		.form-control {
			background-color: #fff;

			.f-item {
				position: relative;
				margin-top: 24rpx;
				width: 100%;

				&~.f-item {
					margin-top: 48rpx;
				}

				.f-label {
					font-size: 28rpx;
					font-weight: 400;
					color: #292929;
					line-height: 28rpx;
				}

				.f-set {
					margin-top: 24rpx;
					padding: 0 24rpx !important;
					height: 92rpx;
					line-height: 92rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 28rpx;
					font-weight: 400;
					width: 100%;

					&.uniActive {
						color: rgb(192, 196, 204);
					}
				}

				.get-code {
					position: absolute;
					right: 24rpx;
					bottom: 34rpx;
					z-index: 10;
					padding-left: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;

					&.color-297EFF {
						color: #297EFF;
					}

					&.arrow {
						padding: 0;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.agreement {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;

				.col {
					display: inline;
					color: #297EFF;
				}
			}

			.post-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 52rpx;
				height: 96rpx;
				background: #3385FF;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.note-content {
			background: #28518F;
			padding: 48rpx 24rpx;

			.tab-section {
				width: 100%;
				height: 276rpx;
				background: rgba(255, 255, 255, 0.24);
				border-radius: 32rpx;

				&~.tab-section {
					margin-top: 72rpx;
				}

				.tn {
					position: relative;
					top: -24rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 2;
					margin: 0 auto;
					width: 590rpx;
					height: 88rpx;
				}

				.list {
					margin-top: 24rpx;
					display: flex;
					justify-content: space-around;

					.item {
						width: 118rpx;
						text-align: center;

						.pic {
							margin: 0 auto;
							width: 88rpx;
							height: 88rpx;
						}

						.name {
							display: block;
							margin-top: 16rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
						}
					}

					.step {
						margin-top: 24rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.warn-section {
				margin-top: 52rpx;
				text-align: center;

				.warn-pic {
					display: block;
					margin: 0 auto;
					width: 58rpx;
					height: 48rpx;
				}

				.main {
					margin-top: 28rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.list {
					margin-top: 24rpx;
					display: flex;
					justify-content: center;

					.item {
						padding: 0 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 24rpx;

						&~.item {
							border-left: 2rpx solid rgba(255, 255, 255, 0.24);
						}
					}
				}

				.copy-right {
					margin-top: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;


					.p {
						line-height: 44rpx;
					}
				}
			}
		}

		.orange-info {
			padding: 128rpx 24rpx 0 24rpx;
			height: 1572rpx;
			background-image: url('https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/crm-h5-orange-footBg.png');
			background-size: 100% 100%;

			.t-pic {
				display: block;
				margin: 0 auto;
			}
		}

		.pop-section {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
			justify-content: center;

			.pop-box {
				position: relative;
				width: 654rpx;
				height: 532rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				text-align: center;
				padding-top: 48rpx;

				.title {
					margin-top: 40rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #292929;
					line-height: 36rpx;
					font-weight: bold;
				}

				.sub {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
				}

				.getIt {
					margin: 48rpx auto 0 auto;
					width: 494rpx;
					height: 92rpx;
					line-height: 92rpx;
					background: #297EFF;
					border-radius: 46rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.close {
					position: absolute;
					top: 40rpx;
					right: 40rpx;
					z-index: 2;
					width: 40rpx;
					height: 40rpx;
				}

				.success-pic {
					margin: 0 auto;
					width: 190rpx;
					height: 176rpx;
				}
			}
		}
	}
	@media only screen and (min-width: 750px) {
		.login-page {
			margin: auto;
			width: 1200px;
	
			.top-bg {
				width: 100%;
				height:88vh;
			}
		}
	}
</style>